<template>
  <div class="Theme">
    <el-page-header @back="back()" content="主题切换页面" style="margin-bottom: 10px;"/>
    <el-radio-group v-model="themeColor">
      <el-radio :label="'theme1'">沉稳蓝</el-radio>
      <el-radio :label="'theme2'">夏天蓝</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
import {toggleClass} from "../../../util";

export default {
  name: "Theme",
  data(){
    return{
      themeColor:this.$store.state.theme.themeColor,
      classH2:'custom-theme1'
    }
  },
  mounted() {
    toggleClass(document.body,`custom-${this.themeColor}`);
    let curcolor=this.$store.state.theme.themeColor;
    this.themeColor=curcolor;
    this.classH2=`custom-${curcolor}`;
  },
  watch:{
    themeColor:{
      handler(){
        this.$store.commit('theme/setThemeColor',this.themeColor);
        console.log(this.themeColor)
        console.log(this.$store.state.theme.themecolor)
        toggleClass(document.body,`custom-${this.themeColor}`)
      }
    }
  },
  methods:{
    back(){
      this.$router.back();
    },
  }

}
</script>

<style scoped>

</style>
